<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .step {
            position:relative;
            padding:10px;
            border-left:5px solid rgb(122, 197, 228);
            position:relative;
            margin-left:1em;
            padding-left:2em;
        }
        .step h2{
            border-top-right-radius: 1em;
            border-bottom-right-radius: 1em;
            border: 3px solid rgb(122, 197, 228);
            margin:0;
            text-indent:1em;
            color:rgb(122, 197, 228);
            font-weight:normal;
            font-size:1.3em;
            margin-left:-1em;
        }
        /* The Balls*/
        .step h2::before{
            content:attr(data-step-id);
            border-radius: 2em;
            background-color: rgb(122, 197, 228);
            width:2em;
            height:2em;
            display:inline-block;
            position:absolute;
            left:-1.1em;
            top:0;
            text-align:center;
            line-height:2em;
            font-size:1.2em;
            font-weight:normal;
            color: #EEEEEE;
            text-indent:0;
        }
        /* Active step: */
        .step.active h2{
            background-color:rgb(122, 197, 228);
            color:#FFFFFF;
            font-weight:bold;
        }
        .step.active h2::before{
            border-right:3px solid #FFFFFF;
        }
        /* Arrow */
    /*    .step::before{
            content:"";
            border:0.8em solid transparent;
            border-top-color:rgb(122, 197, 228);
            border-top-width:1.5em;
            position:absolute;
            display:inline-block;
            left:-0.9em;
            bottom:-0.9em;
        }*/
        /* Inactive */
        .step.inactive{ border-color:#bbbbbb; }
        .step.inactive::before{ border-top-color:#bbbbbb; }
        .step.inactive h2{ color:#aaaaaa;border-color:#bbbbbb; }
        .step.inactive h2::before{background-color: #bbbbbb;}

        /* The last step: */
        [class*='step']:last-of-type{border-color:transparent;}
        [class*='step']:last-of-type::before{content:none;}

        /* ----------------------- */
        /* The button*/
        button{
            background-color:#BBBBBB;
            pointer-events: none;
            border:none;
            color:#FFFFFF;
            border-radius:5px;
            font-size:1.2em;
            padding:5px 10px;
            outline:none;
        }
        .step.active .back,
        .step.active .next{
            background-color:rgb(122, 197, 228);
            cursor:pointer;
            pointer-events: auto;
        }
        .step.inactive button{
            visibility:hidden;
        }
        button::-moz-focus-inner {border: 0;}
        /* ----------------------- */
        /* Basic page layout */
        body {
            max-width:600px;
            margin:auto;
            border:1px solid #aaa;
            padding:1em;
            font-size:1em;
            font-family:Arial,Helvetica,sans-serif;
        }
        @media all and (max-width: 400px){
            .step h2 {font-size:1.1em}
        }</style></head><body>

<div class="step active">
    <h2 data-step-id="1">Do something first</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="next">Next</button>
</div>
<div class="step inactive">
    <h2 data-step-id="2">Then do this</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="back">Back</button>
    <button class="next">Next</button>
</div>
<div class="step inactive">
    <h2 data-step-id="3">Almost there</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="back">Back</button>
    <button class="next">Next</button>
</div>
<div class="step inactive">
    <h2 data-step-id="4">Complete it now</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="back">Back</button>
    <button class="next">Finish</button>
</div>
<div class="step inactive">
    <h2 data-step-id="5">Done!</h2>
    <p>Congratulations! You completed all steps.</p>
</div>

</body>
</html>